<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>全局组件</title>
	<!-- <script src="https://unpkg.com/vue@next"></script> -->
	<script src="js/vue.global.js"></script>
	<link rel="stylesheet" href="css/com.css">
</head>
<body>
<div id="app">
	{{test}}
	<!-- 这里是全局组件 -->
	<component-a></component-a>
	<component-b></component-b>
</div>

</body>
<script>
const app = Vue.createApp({
	data() {
		return {
			count: 4,
			test: '应用 & 组件实例基础',
		}
	}
});

app.component('component-a', {
	// 1、组件中的私有数据
	data:function(){
		return {
			site:'HTML中文网',
			courses:['html', 'css', 'javascript', 'Node.js', 'Vue.js'],
		};
	},
	
	// 2、组件模板的内容
	template: `
		<div>
			<p>欢迎来到  {{site}}，学习</p>
			<ul>
				<li v-for="item in courses">{{item}}</li>
			</ul>
		</div>
	`,
});

app.component('component-b', {
	// 1、组件中的私有数据
	data:function(){
		return {
			site:'HTML中文网2',
			courses:['html2', 'css2', 'javascript2', 'Node.js2', 'Vue.js2'],
		};
	},
	
	// 2、组件模板的内容
	template: `
		<div>
			<p>欢迎来到  {{site}}，学习</p>
			<ul>
				<li v-for="item in courses">{{item}}</li>
			</ul>
		</div>
	`,
});

let vm1 = app.mount('#app');
// console.log(vm1);
</script>
</html>